<template>
  <div class="px-[5px] pt-[10px] text-right" v-if="props.showCheckText && procInsId">
    <el-link type="primary" @click="checkHistoryModalVisible = true">审核记录</el-link>
  </div>
  <!-- 原项目信息 -->
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">原项目信息</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">原项目名称</td>
        <td>{{ detailData.sourceProjectName }}</td>
        <td class="td-name">原项目分类</td>
        <td>{{ detailData.sourceProjectTypeValue }}</td>
      </tr>
      <tr>
        <td class="td-name">原项目负责人</td>
        <td>{{ detailData.sourceChargerName }}</td>
        <td class="td-name">原项目合同金额</td>
        <td>{{ detailData.sourceFeeAuthorize }} 万元</td>
      </tr>
      <tr>
        <td class="td-name">原项目签订日期</td>
        <td>{{ detailData.sourceAuthorizeDate }}</td>
        <td class="td-name">原项目结束日期</td>
        <td>{{ detailData.sourceEndDate }}</td>
      </tr>
    </BaseTable>
  </div>
  <!-- 基本信息 -->
  <div class="bg-white mb-[10px]">
    <BaseHead style="border-bottom: 0">基本信息</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">合同名称</td>
        <td>{{ detailData.name }}</td>
        <td class="td-name">合同负责人</td>
        <td>{{ detailData.chargerName }}</td>
      </tr>
      <tr>
        <td class="td-name">负责人电话</td>
        <td>{{ detailData.chargerTel }}</td>
        <td class="td-name">合同金额</td>
        <td>{{ detailData.feeAuthorize }} 万元</td>
      </tr>
      <tr>
        <td class="td-name">所属单位</td>
        <td>
          <CommonTreeLabel
            isFetch
            paramsName="成果归属单位"
            valueKey="codeColumn"
            labelKey="valueColumn"
            :value="detailData.unitId"
          />
        </td>
        <td class="td-name">交付形式</td>
        <td>
          <CommonLabel
            isFetch
            paramsName="交付形式"
            valueKey="code"
            :value="detailData.deliveryForm"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">签订日期</td>
        <td>{{ detailData.authorizeDate }}</td>
        <td class="td-name">开始日期</td>
        <td>{{ detailData.beginDate }}</td>
      </tr>
      <tr>
        <td class="td-name">结束日期</td>
        <td>{{ detailData.planEndDate }}</td>
        <td class="td-name">合同状态</td>
        <td>
          <CommonLabel
            isFetch
            paramsName="项目状态"
            valueKey="code"
            :value="detailData.projectStatusId"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">甲方是否盖章</td>
        <td>{{ detailData.buyerIsSeal }}</td>
        <td class="td-name">供方是否盖章</td>
        <td>{{ detailData.yfIsSeal }}</td>
      </tr>
      <tr>
        <td class="td-name">合同是否回收</td>
        <td>{{ detailData.isRecover }}</td>
        <td class="td-name">合同电子版</td>
        <td>
          <template v-if="detailData.fileList">
            <p v-for="item in detailData.fileList" :key="item.id" class="my-[5px]">
              {{ item.name
              }}<el-link type="primary" @click="handleDownload(item.id, item.name)" class="ml-[5px]"
                >下载</el-link
              >
            </p>
          </template>
        </td>
      </tr>
      <tr>
        <td class="td-name">盖章页电子版</td>
        <td colspan="3">
          <template v-if="detailData.signatureList">
            <p v-for="item in detailData.signatureList" :key="item.id" class="my-[5px]">
              {{ item.name
              }}<el-link type="primary" @click="handleDownload(item.id, item.name)" class="ml-[5px]"
                >下载</el-link
              >
            </p>
          </template>
        </td>
      </tr>
    </BaseTable>
  </div>
  <!-- 供方信息 -->
  <div class="bg-white">
    <BaseHead style="border-bottom: 0">供方信息</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">供方单位</td>
        <td>{{ detailData.yfUnitName }}</td>
        <td class="td-name">供方单位性质</td>
        <td>
          <CommonLabel
            isFetch
            paramsName="甲方类别"
            valueKey="code"
            :value="detailData.yfUnitKind"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">供方社会信用代码</td>
        <td>{{ detailData.yfCode }}</td>
        <td class="td-name">供方联系人名称</td>
        <td>{{ detailData.yfChargerName }}</td>
      </tr>
      <tr>
        <td class="td-name">供方电话</td>
        <td>{{ detailData.yfTel }}</td>
        <td class="td-name">供方所属省份</td>
        <td>
          <CommonLabel
            :dataList="provinceList"
            labelKey="valueColumn"
            valueKey="codeColumn"
            :value="detailData.yfArea"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">供方所属地市</td>
        <td>
          <CommonLabel
            :dataList="cityList.value"
            labelKey="label"
            valueKey="id"
            :value="detailData.yfCity"
          />
        </td>
        <td class="td-name">供方收款人</td>
        <td>{{ detailData.yfPayee }}</td>
      </tr>
      <tr>
        <td class="td-name">供方开户银行</td>
        <td>{{ detailData.yfBankName }}</td>
        <td class="td-name">供方开户账号</td>
        <td>{{ detailData.yfBankAccount }}</td>
      </tr>
      <tr>
        <td class="td-name">供方国别</td>
        <td>{{ detailData.yfNationality }}</td>
        <td class="td-name">供方是否海外单位</td>
        <td>{{ detailData.yfIsOverseas }}</td>
      </tr>
      <tr>
        <td class="td-name">备注</td>
        <td colspan="3">{{ detailData.note }}</td>
      </tr>
    </BaseTable>
  </div>
  <CheckHistoryModal
    v-model="checkHistoryModalVisible"
    :procInsId="procInsId"
    :checker="checker"
    :checkDate="checkDate"
  />
</template>

<script setup>
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import { detail } from "@/api/project/yf/czhtqd";
import { handleDownload } from "@/utils/main";
import useCommonFetch from "@/hooks/useCommonFetch";
const props = defineProps({
  operateId: String,
  showCheckText: {
    type: Boolean,
    default: false, //默认不显示审核记录文字
  },
});
const provinceList = useCommonFetch("甲方地区");
const checkHistoryModalVisible = ref(false);
const detailData = ref({});
const cityList = ref([]);
const procInsId = ref(null); //流程实例id
const checker = ref("");
const checkDate = ref("");
//获取记录详情
const getDetail = async () => {
  try {
    const res = await detail(props.operateId);
    detailData.value = res.data;
    procInsId.value = res.data.processInstanceId;
    checker.value = res.data.checker;
    checkDate.value = res.data.checkdate;
    cityList.value = useCommonFetch("甲方所属地市", detailData.value.yfArea);
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss"></style>
